<script>
import {getPokeList} from "@/axios/request/index.js"

export default {
  data() {
    return {
      pokeListPage: {},
      pokeListQO: {
        pokeName: "",
        attribute: "",
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  methods: {
    getPokeList() {
      getPokeList(this.pokeListQO).then((result) => {
        this.pokeListPage = result
      })
    },
    pageChange(pageNum, pageSize) {
      this.pokeListQO.pageNum = pageNum = undefined ? 1 : pageNum
      this.pokeListQO.pageSize = pageSize = undefined ? 10 : pageSize
      this.getPokeList()
    }
  },
}
</script>

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right title">
      <el-breadcrumb-item :to="{ path: '/' }" style="font-size:15px;">首页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:15px;">poke</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:15px;">poke列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="query-button">
    <el-row justify="space-evenly">
      <el-col :span="6">
        poke名称：
        <el-input v-model="this.pokeListQO.pokeName" style="width: 200px" placeholder="请输入poke名称"></el-input>
      </el-col>
      <el-col :span="6">
        属性：
        <el-input v-model="this.pokeListQO.attribute" style="width: 200px" placeholder="请输入属性"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button @click="this.getPokeList()">查询</el-button>
      </el-col>
    </el-row>
  </div>
  <div class="table-div">
    <el-scrollbar>
      <el-table :data="this.pokeListPage.list" border height="650">
        <el-table-column label="图片">
          <template #default="scope">
            <el-image :src="'/src/' + scope.row.localUrl" style="width: 100px;height: 100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="poke名称" prop="name"></el-table-column>
        <el-table-column label="属性">
          <template #default="scope">
            <el-tag>{{ scope.row.attribute1 }}</el-tag>
            <el-tag v-if="scope.row.attribute2 != null" style="margin-left: 5px">{{ scope.row.attribute2 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="基础属性值">
          <template #default="scope">
            <el-tag>
              <el-text type="success">生命值：</el-text>
              {{ scope.row.hp }}
            </el-tag>
            <br></br>
            <el-tag style="margin-top: 5px">
              <el-text type="danger">攻击力：</el-text>
              {{ scope.row.aggressivity }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
  <div class="page-div">
    <el-pagination background size="small" layout="prev, pager, next"
                   :total="this.pokeListPage.total"
                   v-model:page-size="this.pokeListQO.pageSize"
                   v-model:current-page="this.pokeListQO.pageNum"
                   @change="this.pageChange(this.pokeListQO.pageNum, this.pokeListQO.pageSize)"></el-pagination>
  </div>
</template>

<style scoped>
.query-button {
  margin-top: 5px;
  text-align: center;
  background-color: #f6f5f5;
  padding: 5px;
}

.table-div {
  margin-top: 5px;
}

.page-div {
  margin-top: 5px;
}
</style>